import React from 'react'
import './index.scss'
export default function MyFooter({ list, changeAll }) {
  // 已选中数量：先找已选中的，再累计 goods_count
  const filterChecked = list.filter((item) => item.goods_state)
  const totalCount = filterChecked.reduce(
    (acc, cur) => acc + cur.goods_count,
    0
  )
  const totalPrice = filterChecked
    .reduce((acc, cur) => acc + cur.goods_count * cur.goods_price, 0)
    .toFixed(2)

  const isChecked = list.every((item) => item.goods_state)
  return (
    <div className='my-footer'>
      <div className='custom-control custom-checkbox'>
        {/* //!#2 子组件调用父组件传递过来的方法的同时并通过实参传递数据到父组件 */}
        <input
          type='checkbox'
          className='custom-control-input'
          id='footerCheck'
          checked={isChecked}
          onChange={() => changeAll(!isChecked)}
        />
        <label className='custom-control-label' htmlFor='footerCheck'>
          全选
        </label>
      </div>
      <div>
        <span>合计:</span>
        <span className='price'>¥ {totalPrice}</span>
      </div>
      <button type='button' className='footer-btn btn btn-primary'>
        结算 ({totalCount})
      </button>
    </div>
  )
}
